<template>
  <div>
    <a-tabs default-active-key="1" size="large">
      <a-tab-pane key="1" tab="项目管理">
        <div class="projectwarp">
          <div>
            <div class="warptop" v-if="tableshow">
              <a-input-search
                placeholder="输入项目名称"
                style="width: 200px;height: 32px;float: left;"
              />
              <a-button type="primary" style="float: right;" @click="createnewfc()">
                <a-icon type="plus"/>
                新建
              </a-button>
            </div>

            <!-- 表格 -->
            <a-table :data-source="dataSource" :columns="columns" v-if="tableshow">
              <!-- 状态 -->
                <template slot='state' slot-scope="item,row">
                  <span v-if="item==0" class="daishenhe"><span class="dots dotdaishen"></span>待审核</span>
                  <span v-if="item==1" class="yibohui"><span class="dots dotyibo"></span>已驳回</span>
                  <span v-if="item==2" class="yishenhe"><span class="dots luoxuan"></span>落选</span>
                  <span v-if="item==3" class="yishenhe"><span class="dots dotyishen"></span>初赛</span>
                  <span v-if="item==4" class="yishenhe"><span class="dots dotyishen"></span>复赛</span>
                  <span v-if="item==5" class="yishenhe"><span class="dots dotyishen"></span>决赛</span>
                </template>
                  <!-- 操作 -->
                  <template  slot="cover" slot-scope="item,row">
                    <a href="#" @click="detailshowfc()" class="txta">详情</a>
                    <a href="#" class="txta" @click="createnewfc()" >编辑</a>
                    <a-popconfirm
                      v-if="dataSource.length"
                      title="确定删除?"
                      @confirm="onDelete(record.key)"
                    >
                      <a>删除</a>
                    </a-popconfirm>
                  </template>

            </a-table>

            <!-- 新建项目页面 -->
            <div v-if="createnew">
                <div class="form1">
                  <span class="titles"><span class="xinghao">*</span>项目主图：</span>
                  <a-upload
                    name="filecontent"
                    list-type="picture-card"
                    class="avatar-uploader"
                    :show-upload-list="false"
                    action="/api/upload/img"
                    :before-upload="beforeUpload"
                    @change="handleChange($event, 'Disabilityimg')"
                  >
                    <img
                      style="width: 80px; height: 80px"
                      v-if="Disabilityimg"
                      :src="imageWebUrl + Disabilityimg"
                      alt="avatar"
                    />
                    <div v-else>
                      <img
                        style="width: 80px"
                        src="@/assets/image/competition/uploadImg.png"
                        alt="image"
                      />
                    </div>
                  </a-upload>
                  <span class="txt32">只支持.jpg，.png 格式,不能大于1G</span>
                </div>
                <div>
                  <span class="titles"><span class="xinghao">*</span>项目名称：</span>
                  <a-input v-model:value="value" placeholder="" style="width: 640px;height: 40px;" />
                </div>
                <div class="mt20">
                  <span class="titles">项目标签（标签之间用“，”隔开）</span>
                  <a-input v-model:value="value" placeholder="" style="width: 640px;height: 40px;" />
                </div>
                <div class="mt20">
                  <span class="titles"><span class="xinghao">*</span>项目介绍</span>
                  <!-- 富文本 -->
                  <UE
                    editorId="sponsorEditor"
                    :initContent="ueSponsorInit"
                    @input="getSponsorContent"
                  />
                </div>
                <div class="mt20">
                  <a-button @click="showtable()" style="width: 108px;height: 40px;">返回</a-button>
                  <a-button type="primary" style="width: 108px;height: 40px;margin-left: 16px;">保存</a-button>
                </div>

              </div>




              <!-- 项目详情页面 -->
              <div class="cxxqwarp" v-if="detailshow">
                <a-tabs v-model:activeKey="activeKey">
                  <a-tab-pane key="1" tab="基本信息">
                    <div>
                      <ul class="jbxxul">
                      	<li>
                          <span>项目主图：</span>
                          <img src="@/assets/image/enterprise/itemselect.png" alt="" class="pjimg">
                        </li>
                        <li>
                          <span>项目名称：<span>北京科技有限公司</span></span>
                        </li>
                        <li>
                          <span>项目标签：<span>标签一，标签二，标签三</span></span>
                        </li>
                        <li>
                          <span>项目介绍：</span><span>活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员通过培训具备一技之长，实现“双向推进”格局，推动残疾人、残疾人家庭事业发展，引导社会各界机构持续关注残疾人、残疾人家庭事业发展。</span>
                        </li>
                      </ul>
                    </div>

                  </a-tab-pane>
                  <a-tab-pane key="2" tab="参选信息" force-render>
                    <div>
                      <div class="cxtop">
                        <ul class="cxuls">
                        	<li>
                            参选赛道：互联网及服务
                          </li>
                          <li>
                            场景：低代码
                          </li>
                          <li>
                            参选时间：2020-09-09
                          </li>
                          <li>
                            参选状态：初赛
                          </li>
                          <li>
                            投票数：- -
                          </li>
                          <li>
                            点评数：3
                          </li>
                          <li>
                            评论数：3
                          </li>
                        </ul>
                      </div>
                      <div class="cxbottom">
                        <span class="txt88">专家点评：</span>
                        <ul class="cxbottomul">
                        	<li>
                            <div>
                              <p><img class="zjdpimg" src="@/assets/image/competition/pjavtor.png" alt=""> <span class="zjname">李明</span><span>人物职称/title内容文本</span></p>
                              <p class="txt56">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                            </div>
                          </li>
                          <li>
                            <div>
                              <p><img class="zjdpimg" src="@/assets/image/competition/pjavtor.png" alt=""> <span class="zjname">李明</span><span>人物职称/title内容文本</span></p>
                              <p class="txt56">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                            </div>
                          </li>
                        </ul>
                      </div>
                      <div class="cxbottom">
                        <span class="txt88">用户评论：</span>
                        <ul class="cxbottomul">
                        	<li>
                            <div>
                              <p><img class="zjdpimg" src="@/assets/image/competition/pjavtor.png" alt=""> <span class="zjname">李明</span><span>人物职称/title内容文本</span></p>
                              <p class="txt56">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                            </div>
                          </li>
                          <li>
                            <div>
                              <p><img class="zjdpimg" src="@/assets/image/competition/pjavtor.png" alt=""> <span class="zjname">李明</span><span>人物职称/title内容文本</span></p>
                              <p class="txt56">活动通过发现适宜残疾人、残疾人家庭参与的行业赛道、应用场景、服务需求，拓宽创业就业领域，鼓励残疾人、残疾人家庭成员。活动通过发现适宜残疾人、残疾人家庭参与的行业赛道。</p>
                            </div>
                          </li>
                        </ul>
                      </div>
                    </div>
                  </a-tab-pane>
                </a-tabs>
                  <div class="mt20">
                    <a-button @click="showtablet()" style="width: 108px;height: 40px;">返回</a-button>
                  </div>
              </div>




          </div>
          <!-- <a-empty
            :image="imgUrl"
            :image-style="{
          height: '220px',
          }"
            style="margin: 0 auto; margin-top: 30px"
            v-if="LatestList.length == 0 && flag"
          /> -->
        </div>

      </a-tab-pane>
    </a-tabs>
    <!-- <Loading v-show="onLoading"></Loading> -->
  </div>
</template>

<script>
import UE from "@/components/UE.vue";

export default {
  // 可用组件的哈希表
  components: { UE },
    data(){
        return {
          dataSource: [
            {
              key: '1',
              name: '项目名称一',
              track: '互联网及服务',
              scene: '低代码',
              time:'2022-09-09',
              state: '0',
            },
            {
              key: '2',
              name: '项目名称二',
              track: '互联网及服务',
              scene: '低代码',
              time:'2022-09-09',
              state:'1',
            },
            {
              key: '3',
              name: '项目名称三',
              track: '互联网及服务',
              scene: '低代码',
              time:'2022-09-09',
              state: '2',
            },
            {
              key: '4',
              name: '项目名称四',
              track: '互联网及服务',
              scene: '低代码',
              time:'2022-09-09',
              state: '3',
            },
            {
              key: '5',
              name: '项目名称四',
              track: '互联网及服务',
              scene: '低代码',
              time:'2022-09-09',
              state: '4',
            },
            {
              key: '6',
              name: '项目名称四',
              track: '互联网及服务',
              scene: '低代码',
              time:'2022-09-09',
              state: '5',
            }
          ],
          columns: [
            {
              title: '序号',
              dataIndex: 'key',
            },
            {
              title: '项目名称',
              dataIndex: 'name',
            },
            {
              title: '参选赛道',
              dataIndex: 'track',
            },
            {
              title: '场景',
              dataIndex: 'scene',
            },
            {
              title: '参选时间',
              dataIndex: 'time',
            },
            {
              title: '参选状态',
              dataIndex: 'state',
              scopedSlots: { customRender: 'state' }
            },
            {
              title: '操作',
              key: 'key',
              dataIndex: 'cover',
              scopedSlots: { customRender: 'cover' }
            },
          ],
          tableshow:true,
          detailshow:false,
          createnew:false,
          activeKey: "1",
        }
    },
    mounted(){

    },
    methods:{
      onDelete(key){
        dataSource.value = dataSource.value.filter(item => item.key !== key);
      },
      createnewfc(){
        this.tableshow=false;
        this.createnew=true;
      },
      detailshowfc(){
        this.tableshow=false;
        this.detailshow=true;
      },
      showtable(){
        this.tableshow=true;
        this.createnew=false;
      },
      showtablet(){
        this.tableshow=true;
        this.detailshow=false;
      }
    }
}
</script>

<style scoped lang="less">
  /deep/.ant-upload-picture-card-wrapper{
    width: auto;
        height: 102px;
  }

  /deep/.cxxqwarp .ant-tabs-nav .ant-tabs-tab-active {
    color: #FFBE37;
    text-shadow: 0 0 0.25px currentColor;
    background: #ffbe37;
    color: #fff;
}
/deep/.cxxqwarp .ant-tabs-nav-wrap{
  margin-bottom: 0;
}
/deep/.cxxqwarp .ant-tabs-nav .ant-tabs-tab{
  margin:0;
  border: 1px solid #ffbe37;
}

/deep/.cxxqwarp .ant-tabs-ink-bar{
  background: transparent;
}

  .form1{
    margin-bottom: 20px;
  }
  .zjname{
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    margin:0 8px;
  }
  .txt88{
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .txt32{
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
  }
  .titles{
    display: block;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color:#333333;
    margin-bottom: 8px;
  }
  .zjdpimg{
    width: 24px;
    height: 24px;
    vertical-align: top;
  }
  .mt20{
    margin-top: 20px;
  }
  .xinghao{
    color: #D51313;
    margin-right: 4px;
  }

  .jbxxul>li{
    margin:8px;
  }

  .cxbottomul>li{
    margin-bottom: 16px;
  }

  .txta{
    margin-right: 10px;
  }

.projectwarp{
  margin-top: 20px;
}

.txt56{
  margin-top: 8px;
}

.pjimg{
  width: 106px;
  height: 80px;
  vertical-align: text-top;
}

.warptop{
  margin-bottom: 20px;
  height: 30px;
}


.cxuls{
  display: flex;
  flex-direction: row;
      flex-wrap: wrap;
      align-content: stretch;
      justify-content: flex-start;
      align-items: flex-end;
}

.cxuls>li{
  width: 456px;
  height: 20px;
  line-height: 20px;
  margin-bottom: 16px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #333333;
}

.cxbottom{
  display: flex;
}
.cxbottom>ul{
  width: 822px;
}
.dots {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 6px;
  }

  .dotdaishen {
    background: #FF7E2E;
  }

  .dotyishen {
    background: #3C7EFF;
  }

  .dotyibo {
    background: #D51313;
  }
  .luoxuan{
    background: #CCCCCC;
  }
</style>
